{include file="public/header"/}
<link rel="stylesheet" type="text/css" href="{__PUBLIC_PATH}/common/plugins/codemirror/codemirror.css">
<script type="text/javascript" src="{__PUBLIC_PATH}/common/plugins/codemirror/codemirror.js"></script>
<script type="text/javascript" src="{__PUBLIC_PATH}/common/plugins/codemirror/mode/xml/xml.js"></script>
<script type="text/javascript" src="{__PUBLIC_PATH}/common/plugins/codemirror/mode/javascript/javascript.js"></script>
<script type="text/javascript" src="{__PUBLIC_PATH}/common/plugins/codemirror/mode/css/css.js"></script>
<script type="text/javascript" src="{__PUBLIC_PATH}/common/plugins/codemirror/mode/php/php.js"></script>
<script type="text/javascript" src="{__PUBLIC_PATH}/common/plugins/codemirror/mode/clike/clike.js"></script>
<script type="text/javascript" src="{__PUBLIC_PATH}/common/plugins/codemirror/mode/htmlmixed/htmlmixed.js"></script>
</head>
<body>
<div class="layui-form">
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><b class="pcfts">*</b> 模板目录</label>
                        <div class="layui-input-inline auto">
                            <span class="fl lh38">/template/{$tpl_theme}/</span>
                        </div>
                        <div class="layui-input-inline" style="width:80px;">
                            <select name="tpldir" id="tpldir" tabindex="1" lay-verify="required">
                                {volist name="tpldirList" id="vo"}
                                <option value="{$vo}">{$vo}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><b class="pcfts">*</b> 文件名称</label>
                        <div class="layui-input-inline auto">
                            <span class="fl lh38">{$type}_{$nid}_</span>
                            <input type="text" id="filename" name="filename" lay-verify="required" value="" placeholder="自定义" class="fl lh38 layui-input" style="width:150px;">
                            <span class="fl lh38">.html</span>
                            <span id="txt_filename"></span>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">HTML代码</label>
                        <div class="layui-input-block">
                            <textarea name="content" id="content" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input type="hidden" name="type" value="{$type}"/>
                            <input type="hidden" name="nid" value="{$nid}"/>
                            <button class="layui-btn" lay-submit lay-filter="formSubmit">确认提交</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
{include file="public/footer"/}
<script>
    layui.use(['layer', 'form'], function () {
        var $ = layui.$,
        layer = layui.layer,
        form = layui.form;

        var editor = CodeMirror.fromTextArea(document.getElementById('content'), {
            lineNumbers: true,
            lineWrapping: true, 
            mode: 'text/html'
        });

        $('#filename').keyup(function(){
            var dfilename = $(this).val();
            var dtpldir = $("#tpldir").val();
            $.ajax({
                type: "POST",
                url: "{:url('/arctype/ajax_newtpl')}?formSubmit=1",
                data: {filename:dfilename,tpldir:dtpldir},
                dataType: 'json',
                success: function (res) {
                    if(!res.status){
                        layer.msg(res.msg, {icon: 2, time: 2000});
                        return false;
                    }
                }
            });
        });

        //监听提交
        form.on('submit(formSubmit)', function(data){
            layer.msg('正在处理请勿刷新页面', {icon: 16,shade: 0.01,time:3600000});
            data.field.content = editor.getValue();
            $.ajax({
                type : 'post',
                url : "{:url('/arctype/ajax_newtpl')}",
                data : data.field,
                dataType : 'json',
                success : function(res){
                    layer.closeAll('loading');
                    if(res.status){
                        parent.layer.closeAll();
                        if ('lists' == res.data.type) {
                            var id = 'templist';
                        } else {
                            var id = 'tempview';
                        }
                        $('#'+id, window.parent.document).append('<option value="'+res.data.filename+'" selected="true">'+res.data.filename+'</option>');
                        parent.formRender();
                        parent.layer.msg(res.msg, {icon: 1, time: 1000});
                    }else{
                        layer.closeAll();
                        if (res.data.focus) {$('#'+res.data.focus).focus();}
                        layer.msg(res.msg, {icon: 2, time: 1000});
                    }
                },
                error: function(e){
                    layer.closeAll('loading');
                    layer.msg("未知错误，操作中断！", {icon: 2, time: 1000});
                }
            });
        });

    });
</script>
